<template>
  <div class="add-member-level">
    <Row type='flex'
         justify="center">
      <Col>
      <Form ref="formInline"
            :model="formInline"
            :rules="ruleInline"
            :label-width="140">
        <FormItem prop="sceneType"
                  label="二维码适用类型：">
          <Row type="flex"
               align="middle">
            <Col>
            <Select v-model="formInline.sceneType"
                    style="width:180px">
              <Option v-for="item in typeList"
                      :value="item.id"
                      :key="item.id">{{ item.value }}</Option>
            </Select>
            </Col>
          </Row>
        </FormItem>
        <!-- <FormItem prop="handleCardUrl"
                  label="办卡接口URL：">
          <Row type="flex"
               align="middle">
            <Col>
            <Input type="text"
                   @on-keyup="filterName"
                   v-model="formInline.handleCardUrl"
                   placeholder="请输入"
                   :maxlength="20"
                   style="width:280px"></Input>
            </Col>
          </Row>
        </FormItem> -->
        <!-- <FormItem prop="userRule"
                  label="是否推送消息：">
          <Row type="flex"
               align="top">
            <Col>
            <RadioGroup v-model="formInline.userRule"
                        @on-change="push_change">
              <Radio label="1"
                     style="margin-right:30px">是</Radio>
              <Radio label="0">否</Radio>
            </RadioGroup>
            </Col>
          </Row>
        </FormItem>
        <FormItem prop="templateSendType"
                  v-if="formInline.userRule==='1'"
                  label="推送类型：">
          <Row type="flex"
               align="middle">
            <Col>
            <Select v-model="formInline.templateSendType"
                    style="width:180px">
              <Option value="1">注册会员</Option>
            </Select>
            </Col>
          </Row>
        </FormItem> -->
        <FormItem prop="sceneSource"
                  label="注册会员来源编码：">
          <Row type="flex"
               align="middle">
            <Col>
            <Input type="text"
                   @on-keyup="filterName"
                   v-model="formInline.sceneSource"
                   placeholder="请输入"
                   :maxlength="20"
                   style="width:280px"></Input>
            </Col>
          </Row>
        </FormItem>
        <FormItem prop="scanSourceName"
                  label="注册会员来源名称：">
          <Row type="flex"
               align="middle">
            <Col>
            <Input type="text"
                   @on-keyup="filterName"
                   v-model="formInline.scanSourceName"
                   placeholder="请输入"
                   :maxlength="20"
                   style="width:280px"></Input>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  style="width:100px"
                  @click="handleSubmit('formInline')">生成二维码</Button>
          <Button class="btn"
                  style="margin-left:20px;width:100px"
                  @click="closePage">取消</Button>
        </FormItem>
      </Form>
      <Modal title="门店二维码"
             v-model="modal"
             class-name="vertical-center-modal2">
        <Row type="flex"
             justify="center"
             align="middle">
          <Col>
          <div style="width:140px;height:140px;"
               id="qrcode">
          </div>
          </Col>
        </Row>
        <div style="font-size: 12px;
    color:rgb(102, 102, 102);
    line-height:17px;
    padding-top:20px;
    word-break: break-all;
    word-wrap: break-word;
    text-align:center;">{{modalList.url}}</div>
        <div slot="footer">
          <Row type="flex"
               justify="end"
               align="middle">
            <Col>
            <Button class="btn"
                    style="margin-right:8px;width:72px"
                    @click="reset">取消</Button>
            <Button class="btn"
                    type="primary"
                    style="margin-right:20px;width:72px"
                    @click="resubmit">确认</Button>
            </Col>
          </Row>
        </div>
      </Modal>
      </Col>
    </Row>
  </div>
</template>

<script>
import { createQrcode } from '@/api/setting'
import { routeEqual } from '@/libs/util'
import QRCode from 'qrcode2'
export default {
  name: 'store_qrcode',
  data () {
    return {
      memberLevelList: [],
      modal: false,
      code: '',
      modalList: {
        img: '',
        url: ''
      },
      typeList: [{
        id: '1',
        value: '注册会员'
      }],
      formInline: {
        // handleCardUrl: '',
        sceneType: '',
        templateSendType: '',
        userRule: '0',
        sceneSource: '',
        scanSourceName: ''
      },
      ruleInline: {
        sceneType: [
          { required: true, message: '请选择二维码类型类型', trigger: 'change' }
        ],
        templateSendType: [
          { required: true, message: '请选择推送类型', trigger: 'change' }
        ],
        sceneSource: [
          { required: true, message: '来源编码不能为空', trigger: 'blur' }
        ],
        scanSourceName: [
          { required: true, message: '来源名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    push_change (sta) {
      // this.formInline.ispush = sta
    },
    filterName () {
      this.formInline.sceneSource = this.formInline.sceneSource.replace(/\s+/g, '')
      this.formInline.scanSourceName = this.formInline.scanSourceName.replace(/\s+/g, '')
      // this.formInline.userRule = this.formInline.userRule.replace(/[^0-9A-Za-z\u4e00-\u9fa5]/g, '')
    },
    closePage () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'member_rights_list'
        })
      })
    },
    reset () {
      this.modal = false
    },
    resubmit () {
      this.modal = false
    },
    handleSubmit () {
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          const { sceneType, sceneSource, scanSourceName, templateSendType, userRule } = this.formInline
          if (this.$route.query.sn === null) {
            this.$Message.error(`请先配置门店的parterSign`)
            return false
          }
          if (userRule === '1') {
            createQrcode({
              sceneType,
              partnerSign: this.$route.query.sn,
              shopId: this.$route.params.id,
              sceneSource,
              scanSourceName,
              templateSendType
            }).then(res => {
              if (res.data.status === 200) {
                this.modal = true
                this.$nextTick(() => {
                  document.getElementById('qrcode').innerHTML = ''
                  this.code = new QRCode(document.getElementById('qrcode'), {
                    text: res.data.data,
                    width: 140,
                    height: 140,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                  })
                })
                this.modalList.url = res.data.data
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          } else {
            createQrcode({
              sceneType,
              partnerSign: this.$route.query.sn,
              shopId: this.$route.params.id,
              sceneSource,
              scanSourceName
            }).then(res => {
              if (res.data.status === 200) {
                this.modal = true
                this.$nextTick(() => {
                  document.getElementById('qrcode').innerHTML = ''
                  this.code = new QRCode(document.getElementById('qrcode'),
                    {
                      text: res.data.data,
                      width: 140,
                      height: 140,
                      colorDark: '#000000',
                      colorLight: '#ffffff',
                      correctLevel: QRCode.CorrectLevel.H
                    })
                })
                this.modalList.url = res.data.data
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      })
    }
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
.add-member-level {
  padding-top: 100px;
}
.replace_tit {
  position: absolute;
  left: 0;
  top: 72px;
  width: 96px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  opacity: 0.8;
  background: #ed4014;
  color: #fff;
}
</style>
<style lang="less">
.vertical-center-modal2 {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal {
    top: 0;
    width: 400px !important;
  }
}
</style>
